<?php
$arr_img = array();
?>
<h2 class="st_tl_pg">Galeria de Fotos</h2>
<div id="container" class="st-cp-pg-galeria" style="overflow: hidden">
<?php foreach ($this->result as $row){ ?>
    <?php
    $img = glob('public/upload/galeria/'.$row['GAL_ID'].'_g_tb.*');
    if(isset($img[0])){ 
    $arr_img[$img[0]] = $img[0];

    $tam_img = getimagesize($img[0]);
    $style = 'style="width: '.$tam_img[0].'px;height: '.$tam_img[1].'px"';
    ?>
    <div class="item" <?php echo $style; ?>>
        <a href="<?php echo str_replace('_tb.', '.',$img[0]); ?>" data-lightbox="roadtrip" />
            <img title="" src="<?php echo $img[0].'?1='.  rand(99, 9999); ?>" />
        </a> 
    </div>
    <?php } ?>         
<?php }
    $imgs = glob('public/upload/galeria/*_g_tb.*');
    asort($imgs);
    foreach ($imgs as $key => $img) {
        if(!isset($arr_img[$img])){
        $tam_img = getimagesize($img);
        $style = 'style="width: '.$tam_img[0].'px;height: '.$tam_img[1].'px"';
?>
    <div class="item" <?php echo $style; ?>>
        <a href="<?php echo str_replace('_tb.', '.',$img); ?>" data-lightbox="roadtrip" />
            <img title="" src="<?php echo $img.'?1='.  rand(99, 9999); ?>" />
        </a>
    </div>
<?php   
        } 
    } 
?>
</div>

<script type="text/javascript" src="<?php echo $this->urlbase; ?>/public/media/js/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>

<link  href="<?php echo $this->urlbase.'/public/media/js/lightbox/css/lightbox.css' ?>" rel="stylesheet" media="screen"/>
<script src="<?php echo $this->urlbase.'/public/media/js/lightbox/js/modernizr.custom.js' ?>"></script>
<script src="<?php echo $this->urlbase.'/public/media/js/lightbox/js/lightbox-2.6.min.js' ?>"></script>

<script src="<?php echo $this->urlbase.'/public/media/js/masonry.pkgd.min.js'?>"></script>
<script> 
$(function(){
    $('#container').masonry({
      itemSelector: '.item',
      columnWidth: 1
    });
}); 
</script>